import React, { useState } from 'react'
import {
	View,
	ViewStyle,
	TextStyle,
	StyleSheet,
	ImageStyle,
	Image,
	TouchableOpacity,
	Text,
} from 'react-native'
import { InfoLayout, SettingMoney, Division, ChangeCard, ShortBar } from 'components'
import { translateSize, themeColors, commonStyle, definedColors } from 'styles'
import InputMoney from 'components/InputMoney'
import assets from 'modules/assets'
import { navigate } from 'services/navigation'
import { PosAppFee, PosAppBank } from 'api/pos';
import { styles } from './OrderItem';
import { getAuthorization, operate } from 'services/authorization';
import { Alert } from 'react-native';

interface BookItemProps {
	key: string
	index: number
	data: PosAppFee
	bankList: PosAppBank[]
	onChange: (money: number, isCheck: boolean) => void
}

const BookItem: React.FC<BookItemProps> = props => {
	const [isCheck, setCheck] = useState(false)
	const [money, setMoney] = useState(props.data.ye)
	return (
		<View style={{ ...styles.itemContainer, paddingTop: translateSize(props.index === 0 ? 0 : 30) }} key={props.key}>
			<View
				style={{
					width: '100%',
					backgroundColor: definedColors.white
				}}>

				<TouchableOpacity
					style={{
						...commonStyle.containerRow,
						alignItems: 'flex-end',
						justifyContent: 'space-between',
					}}
					onPress={() => {
						props.onChange(money, !isCheck)
						setCheck(!isCheck)
					}}>
					<ShortBar style={styles.title} title={getAuthorization().project.name || ''} />
					<TouchableOpacity
						style={{ ...commonStyle.headerRight, paddingVertical: translateSize(0) }}
						onPress={() => {
							operate()
							navigate('HandingFee', { tradeInfo: { ...props.data, auartName: '认筹', erpId: props.data.erpTradeId }, bankList: props.bankList })
						}}>
						<Text style={commonStyle.redTag}> 收取POS机手续费 </Text>
					</TouchableOpacity>
					<View
						style={styles.checkContainer}
					>
						<Image
							style={styles.check}
							source={isCheck ? assets.images.icon_check : assets.images.icon_uncheck}
						/>
					</View>
				</TouchableOpacity>
				<Text style={{ ...styles.room, ...commonStyle.roomStyle }}> {props.data.roomName} </Text>

			</View>
			<InfoLayout title="认筹单号：" content={props.data.vbeln} />
			<InfoLayout title="项目排号：" content={props.data.actualNumber} />
			<InfoLayout title="应收金额：" content={`${props.data.fundAmount}`} />
			<InfoLayout title="应收日期：" content={`${props.data.ysrq}`} />
			<TouchableOpacity
				onPress={() => {
					operate()
					navigate('GetinList', { erpFeeId: props.data.erpId })
				}}>
				<InfoLayout
					title="已收金额："
					titlePartner={
						<View
							style={{ ...commonStyle.ringButton, borderColor: definedColors.chocolate }}
						>
							<Text style={styles.trade}>明细</Text>
						</View>
					}
					content={`${props.data.fundActual}`}
				/></TouchableOpacity>
			<SettingMoney />
			<InputMoney
				editable={true}
				upperLimit={999999999}
				defaultValue={props.data.ye}
				onChange={money => {
					props.onChange(Number(money), isCheck)
					setMoney(money)
				}}
			/>
			<Division />
			{/* <ChangeCard
				style={{ paddingBottom: translateSize(24) }}
				cardInfo={{ name: '中国银行', cardId: '34545893854308503854903' }}
				onPress={() => { }}
			/> */}
		</View>
	)
}

export default BookItem
